<template>
	<view class="self-help-pay">
		<!-- <UserDate :showDate='false' color='#fff'/> -->
		<view class="self-help-pay-mian">
			<view class="self-help-pay-mian-box">
				<view class="self-help-pay-mian-box-centent">
					<view class="self-help-pay-mian-box-title self-help-pay-mian-box-item flexR">
						<view class="item-check"></view>
						<view class="item-name"> 项目名称 </view>
						<view class="item-price"> 单价(元) </view>
						<view class="item-number"> 数量 </view>
						<view class="item-money"> 金额(元) </view>
					</view>
					<view class="self-help-pay-mian-box-centent">
						<view class="self-help-pay-mian-box-item self-help-pay-mian-box-centent-item flexR" v-for="(item, i) in dataList" :key='i'>
							<checkbox-group @change="handleCheck($event,i)" class="item-check">
								<checkbox :checked="item.checked" :value="item.itemCode" :disabled="payType===3" />
							</checkbox-group>
							<view class="item-name">
								{{item.itemName}}
							</view>
							<view class="item-price">
								{{item.price}}
							</view>
							<view class="item-number">
								<u-number-box v-if="item.optionalFlag===0" input-width='40' v-model="item.num" @change="valChange" :min='1'></u-number-box>
								<text v-else>{{item.num}}</text>
							</view>
							<view class="item-money">
								{{transPrice(item)}}
							</view>
						</view>
					</view>
				</view>
				<view class="reminder">
					<view class="reminder-title">
						温馨提示
					</view>
					<view class="reminder-content">
						微信缴费仅支持纯自费结算
					</view>
				</view>
			</view>
			<view class="theme-light-btn" style="height: 90rpx;" @click="onSubmit">
				结算
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Load from '@/components/Load/index.vue'
	import UserDate from '@/components/UserInfo/user-date.vue'
	import { getSelfPay, poSelfPay } from '@/api/otherService.js'
	export default {
		components:{ UserDate, Load },
		data() {
			return {
				dataList:[],
				menuId:null,
				payType:3, // 缴费类型 1单选 2多选 3不能选
				load:false
			}
		},
		async onLoad(op) {
			this.menuId = op.menuId
			this.payType = op.payType
			await this.$onLaunched
			this.initData()
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		methods: {
			handleCheck(val,index){
				this.dataList[index].checked = val.detail.value.length===0?false:true
			},
			initData(){
				this.load = true
				getSelfPay({menuId:this.menuId}).then(data => {
					this.load = false
					let res = data||[]
					res.forEach(item => {
						item.checked = true
					})
					this.dataList = res
				}).catch(e => {
					this.dataList = []
					this.load = false
				})
			},
			transPrice(val){
				let res = val.price*val.num
				return res.toFixed(2)
			},
			onSubmit(){
				if(!this.userInfo.patId){
					uni.navigateTo({
						// url:'/pages/Login/index'
						url:'/pages/Login/addPatient'
					})
					return
				}
				let params = []
				let res = this.dataList.filter(item => item.checked)
				res.forEach(item => {
					params.push({
						patId:this.userInfo.patId,
						num: item.num,
						itemCode: item.itemCode,
						deptCode: item.deptCode,
						doctorCode:item.doctorCode
					})
				})
				if(!params.length){
					this.$u.toast('请至少选择一项需要结算的项目')
					return
				}
				this.load = true
				poSelfPay(params).then(data => {
					this.load = false
					let res = data||''
					if(res){
						uni.navigateTo({
							url:'/pages/Pay/prescriptionPay?cfxhhj=' + res.hjcfxh
						})
					}
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.self-help-pay{
		height: calc(100vh);
		background-color: $uni-bg-color;
		.self-help-pay-mian{
			padding: 30rpx;
			.self-help-pay-mian-box{
				max-height: calc(100vh - 150rpx - 60rpx);
				overflow: scroll;
				.self-help-pay-mian-box-centent{
					flex: 1;
					.self-help-pay-mian-box-item{
						justify-content: space-between;
						min-height: 70rpx;
						align-items: center;
						padding: 0 20rpx;
						>view{
							text-align: center;
							padding: 10rpx;
						}
						>.item-check{
							width: 20px;
							padding: 0;
							>checkbox{
								transform:scale(0.7);
								margin: 0;
							}
						}
						>.item-name{
							flex: 3;
						}
						>.item-price{
							flex: 2;
						}
						>.item-number{
							flex: 3;
						}
						>.item-money{
							flex: 2;
						}
					}
					.self-help-pay-mian-box-title{
						background-color: $theme-color-dark;
					}
					.self-help-pay-mian-box-centent-item:nth-of-type(2n){
						background-color: #F9F9F9;
					}
				}
			} 
		}
	}
</style>